<template>
  <div>
    <el-form
      :model="item"
      :rules="rules"
      ref="item"
      label-width="100px"
      class="demo-ruleForm"
      style="padding: 50px"
    >
      <el-form-item label="借款额度" prop="borrowAmount">
        <el-input v-model="item.borrowAmount"></el-input>
      </el-form-item>
      <el-form-item label="积分区间" prop="integralStart">
        <el-input v-model="item.integralStart"></el-input>
      </el-form-item>
      <el-form-item prop="integralEnd">
        <el-input v-model="item.integralEnd"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import integralGradeApi from '@/api/integral-grade'
export default {
  data() {
    return {
      //代表收集表单数据的对象
      item: {
        integralStart: 0,
        integralEnd: 0,
      },
      rules: {
        //borrowAmount代表要校验的属性
        borrowAmount: [
          { required: true, message: '请输入借款额度', trigger: 'blur' }, //内容空值校验
          { min: 3, max: 7, message: '长度在 3 到 7 位', trigger: 'blur' }, //长度范围校验
        ],
        integralStart: [
          { required: true, message: '请输入积分等级开始', trigger: 'blur' }, //内容空值校验
          { min: 2, max: 7, message: '长度在 2 到 7 位', trigger: 'blur' }, //长度范围校验
        ],
        integralEnd: [
          { required: true, message: '请输入积分等级结束', trigger: 'blur' }, //内容空值校验
          { min: 2, max: 7, message: '长度在 2 到 7 位', trigger: 'blur' }, //长度范围校验
        ],
      },
    }
  },
  created() {
    //获取访问当前页面时的 请求参数
    // console.log('请求参数id: ', this.$route.query.id)
    // console.log('路径参数id：' + this.$route.params.id)
    //判断新增还是更新，更新则查询积分等级回显
    if (this.$route.params.id) {
      //路径参数id存在 表示更新
      //查询积分等级回显
      integralGradeApi.getById(this.$route.params.id).then((r) => {
        this.item = r.data.item
      })
    }
  },
  methods: {
    save() {
      //保存积分等级
      integralGradeApi.save(this.item).then((r) => {
        this.$message.success('新增成功')
        //跳转到 积分等级列表页展示：使用路由对象 根据指定路由路径加载对应的页面渲染展示
        this.$router.push('/integralGrade/list')
      })
    },
    update() {
      integralGradeApi.update(this.item).then((r) => {
        this.$message.success('更新成功')
        this.$router.push('/integralGrade/list')
      })
    },
    submitForm() {
      //判断 如果是新增访问新增接口 否则访问更新接口
      if (this.$route.params.id) {
        this.update()
      } else {
        this.save()
      }
    },
  },
}
</script>
